<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const activeIndex = ref('1')
const navMenuData = reactive([
  {
    nemuName: "echart图表",
    url: '/home/echart',
    id: '1'
  },
  {
    nemuName: "详情页",
    url: '/home/detail',
    id: '2'
  },
  {
    nemuName: "评论页",
    url: '/home/comments',
    id: '3'
  }
])

const router = useRouter()
const clickMenu = (item, index) => {
  router.push(item.url)
}

</script>
<template>
  <div class="nav-menu">
    <div class="left-menu">
<!--      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">-->
<!--        <el-radio-button :label="false">expand</el-radio-button>-->
<!--        <el-radio-button :label="true">collapse</el-radio-button>-->
<!--      </el-radio-group>-->
      <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
      >
        <el-menu-item
            v-for="(item,index) in navMenuData"
            :key="item.id"
            @click="clickMenu(item, index)"
            :index="item.id"
        >
          <el-icon>
            <location/>
          </el-icon>
          <template #title>
            <span>{{ item.nemuName }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-menu">
      <router-view></router-view>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.nav-menu {
  display: flex;
  .right-menu {
    flex: 1;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>